<script setup lang="ts">
import { setGeneralSetting } from '@/api/AccountSettingApi.ts'
import type { GeneralSetting } from '@/api/types/Setting.ts'
import { useGeneralSettingStore } from '@/config/store/UseGeneralSettingStore.ts'
import type { ArcoForm, ArcoFormRules } from '@/tool/ArcoFormTool.ts'
import { ref } from 'vue'

const generalSettingStore = useGeneralSettingStore()

const formRef = ref<ArcoForm | null>()
const formData = ref<GeneralSetting>(generalSettingStore.setting)
const formRule: ArcoFormRules<GeneralSetting> = {}

const onSettingChange = () => {
    generalSettingStore.setValue(formData.value)
    setGeneralSetting(formData.value)
            .then(() => console.debug('已保存', new Date().toISOString()))
}
</script>

<template>
<a-form
        ref="formRef"
        :model="formData"
        :rules="formRule"
        auto-label-width
        class="general-setting-form"
        scroll-to-first-error
>
    <a-form-item field="drag" label="启用拖拽排序">
        <a-switch v-model="formData.enableDrag" @change="onSettingChange" />
    </a-form-item>

    <a-form-item field="showCreateBtn" label="显示创建按钮">
        <a-switch v-model="formData.showCreateBtn" @change="onSettingChange" />
    </a-form-item>

    <a-form-item field="lockLayout" label="锁定布局">
        <a-switch v-model="formData.lockLayout" @change="onSettingChange" />
    </a-form-item>

</a-form>
</template>

<style scoped lang="scss">
.general-setting-form {
    max-width: 600px;
}
</style>
